<template>
    <div class="content">
        <!-- 用户 -->
        <div class="user">
            <div class="pic" @click="picClick">
                <img :src="pic" v-show="pic">
                <input type="file" hidden ref="uploadAvatorRef" accept="image/jpeg" @change="unloadAvatorChange" />
            </div>
            <div class="nickname">
                <h3>快去绑定账号获取头像和昵称吧</h3>
            </div>
            <div class="desc">
                <h6>又是清闲的一天!</h6>
            </div>
        </div>
        <!-- 用户 -->

        <!-- 注销账号 -->
        <div class="gong-neng">
            <div @click="clear">清空缓存<span>></span></div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            pic: ''
        }
    },
    mounted() {
        this.pic = localStorage.getItem('pic')
    },
    methods: {
        clear() {
            localStorage.clear()
            sessionStorage.clear()
            this.pic = ''
            this.$toast('注销成功');
        },
        // 点击头像上传
        picClick() {
            if (this.picUrl) return
            this.$refs.uploadAvatorRef.click()
        },

        // 触发上传
        unloadAvatorChange() {
            let reader = new FileReader()
            // const blob = window.URL.createObjectURL();
            reader.readAsDataURL(this.$refs.uploadAvatorRef.files[0]);
            reader.onload = () => {
                this.pic = reader.result
                localStorage.setItem('pic', this.pic)
                this.$refs.uploadAvatorRef.value = "";
            }

        },
    }
}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .user {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 5vw;


        .pic {
            width: 30vw;
            height: 30vw;
            background-color: rgb(238, 238, 238);
            border-radius: 50%;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;

            }
        }

        .nickname {
            margin-top: 5vw;
            width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;

        }

        .desc {
            margin-top: 2vw;
            color: #999;
            width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
        }
    }

    .gong-neng {
        margin-top: 5vw;
        width: 80%;

        div {
            padding: 10px;
            font-size: 16px;

            span {
                float: right;
                color: #999;
            }
        }

    }

}
</style>